<template>
	<el-dialog :model-value="visible" width="70%" :title="null" @close="onClose" class="news-detail-dialog" :append-to-body="true">
		<div v-if="loading" class="news-detail-loading">
			<el-icon class="loading-icon"><Loading /></el-icon>
			<span>加载中...</span>
		</div>
		<div v-else-if="!props.row" class="news-detail-empty">
			<el-empty description="暂无内容" />
		</div>
		<div v-else class="news-detail-container">
			<!-- 头部区域 -->
			<div class="news-detail-header">
				<!-- 分类标签 -->
				<div class="category-tag" v-if="newsData?.CategoryName">
					{{ newsData?.CategoryName }}
				</div>

				<!-- 标题区 -->
				<h1 class="news-detail-title">
					{{ newsData?.Title || '新闻详情' }}
				</h1>

				<!-- 元数据信息 -->
				<div class="news-detail-meta">
					<div class="meta-item">
						<el-icon><Calendar /></el-icon>
						<span>{{ formatDate(newsData?.CreateTime) }}</span>
					</div>

					<div class="meta-item" v-if="newsData?.Author">
						<el-icon><User /></el-icon>
						<span>{{ newsData?.Author }}</span>
					</div>

					<div class="meta-item" v-if="newsData?.ViewCount">
						<el-icon><View /></el-icon>
						<span>{{ newsData?.ViewCount || 0 }}次浏览</span>
					</div>
				</div>
			</div>

			<!-- 元数据区 -->
			<div class="news-detail-fields" v-if="hasMetaFields">
				<!-- <div class="news-detail-field" v-if="newsData?.SubTitle">
					<div class="field-icon subtitle-icon">
						<el-icon><ChatDotRound /></el-icon>
					</div>
					<div class="field-content">
						<div class="field-label">副标题</div>
						<div class="field-text">{{ newsData?.SubTitle }}</div>
					</div>
				</div> -->
				<div class="news-detail-field" v-if="newsData?.Summary">
					<div class="field-icon summary-icon">
						<el-icon><Document /></el-icon>
					</div>
					<div class="field-content">
						<div class="field-label">摘要</div>
						<div class="field-text">{{ newsData?.Summary }}</div>
					</div>
				</div>
			</div>

			<!-- 封面图片 -->
			<div class="news-detail-cover" v-if="newsData?.CoverImageId">
				<el-image
					:src="`/api/_file/getfile/${newsData?.CoverImageId}?width=500&height=300`"
					fit="cover"
					:initial-index="0"
					:preview-src-list="newsData?.CoverImageId ? [`/api/_file/getfile/${newsData?.CoverImageId}`] : []"
					:preview-teleported="true"
					:z-index="3300"
				>
					<!-- 加载中状态 -->
					<template #placeholder>
						<div class="image-loading-placeholder">
							<el-icon class="loading-icon"><Loading /></el-icon>
							<span>图片加载中...</span>
						</div>
					</template>

					<!-- 加载失败状态 -->
					<template #error>
						<div class="image-error-placeholder">
							<el-icon><Picture /></el-icon>
							<span>图片加载失败</span>
						</div>
					</template>
				</el-image>
			</div>

			<!-- 内容区域 -->
			<div class="news-detail-content" ref="contentRef" v-html="renderedContent"></div>

			<!-- 附件列表 -->
			<div class="news-detail-attachments" v-if="hasAttachments">
				<div class="attachments-title">
					<el-icon><Document /></el-icon> 附件
				</div>
				<div class="attachments-list">
					<div
						v-for="(attachment, index) in attachments"
						:key="attachment.ID || index"
						class="attachment-item"
						@click="downloadAttachment(attachment)"
						:class="{ 'is-loading': attachment.downloading }"
					>
						<el-icon :class="getFileIconClass(attachment)">
							<component :is="getFileIcon(attachment)" />
						</el-icon>
						<span class="attachment-name">{{ attachment.name || getFileName(attachment.url) }}</span>
						<el-button type="primary" size="small" text class="attachment-download">
							<el-icon><Download /></el-icon>
						</el-button>
					</div>
				</div>
			</div>
		</div>

		<!-- 使用el-image-viewer组件实现内容图片预览 -->
		<el-image-viewer v-if="showImageViewer" :url-list="previewImages" :initial-index="previewIndex" :z-index="3000" @close="closeImageViewer" />
	</el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, defineProps, defineEmits, computed, nextTick, shallowRef } from 'vue';
import { Loading, Document, Download, Picture, Calendar, User, View, ChatDotRound } from '@element-plus/icons-vue';
import { useMarkdown } from '../composables/useMarkdown';
import { useFileUtils } from '../composables/useFileUtils';
import { SysArticleApi } from '/@/views/article/sysarticle/api/index';
import { auth } from '/@/utils/authFunction';
import fileApi from '/@/api/file';
import { ElMessage } from 'element-plus';
// 导入复用逻辑
const { renderMarkdown, processContentDOM } = useMarkdown();
const { getFileIcon, getFileIconClass, getFileName } = useFileUtils();

// 类型定义
interface Attachment {
	name?: string;
	url: string;
	type?: string;
	size?: number;
	FileId?: string;
	ArticleId?: string;
	ID?: string;
	IsVisible?: boolean;
	Order?: number;
	downloading?: boolean; // 新增下载状态
}

const props = defineProps<{
	row: any | null;
	visible: boolean;
}>();

const api = SysArticleApi();

const emit = defineEmits(['update:visible']);

// 状态变量
const newsData = shallowRef<any | null>(null);
const loading = ref(false);
const contentRef = ref<HTMLElement | null>(null);

// 图片预览相关
const previewImages = ref<string[]>([]);
const previewIndex = ref(0);
const showImageViewer = ref(false);

// 计算属性
const hasMetaFields = computed(() => {
	return !!(newsData.value?.SubTitle || newsData.value?.Summary);
});

const attachments = computed(() => {
	return (newsData.value?.Attachments || []) as Attachment[];
});

const hasAttachments = computed(() => {
	return attachments.value.length > 0;
});

// 内容渲染（使用记忆化）
const renderedContent = computed(() => {
	const content = newsData.value?.Content || newsData.value?.Summary || '';
	return renderMarkdown(content);
});

// 为内容中的图片设置预览功能
function setupContentImagePreview() {
	if (!contentRef.value) return;

	const images = contentRef.value.querySelectorAll('img');
	const urls: string[] = [];

	images.forEach((img, index) => {
		// 收集所有图片URL
		if (img.src) {
			urls.push(img.src);
		}

		// 添加点击事件和样式
		img.style.cursor = 'pointer';
		img.dataset.index = index.toString();
		img.onclick = (event) => {
			event.preventDefault();
			event.stopPropagation();
			openImagePreview(parseInt(img.dataset.index || '0'));
		};
	});

	// 更新预览图片列表
	previewImages.value = urls;
}

// 打开图片预览
function openImagePreview(index: number) {
	if (previewImages.value.length > 0) {
		previewIndex.value = index;
		// 显示预览器
		showImageViewer.value = true;

		// 防止页面滚动
		document.body.style.overflow = 'hidden';
	}
}

// 关闭图片预览
function closeImageViewer() {
	showImageViewer.value = false;
	// 恢复页面滚动
	document.body.style.overflow = '';
}

/**
 * 下载附件
 */
async function downloadAttachment(attachment: Attachment) {
	if (!attachment.FileId) return;

	// 防止重复点击
	if (attachment.downloading) return;

	try {
		// 设置下载状态
		attachment.downloading = true;

		// 通过API下载文件
		await fileApi().downloadFile(attachment.FileId);
		ElMessage.success('下载成功');
	} catch (error) {
		console.error('下载文件失败:', error);
		ElMessage.error('下载失败，请重试');

		// 备用下载方式：创建a标签直接下载
		try {
			window.open(attachment.url, '_blank');
		} catch (e) {
			console.error('备用下载方式也失败:', e);
		}
	} finally {
		// 恢复下载状态
		attachment.downloading = false;
	}
}

// 监听数据变化
watch(
	() => props.row,
	async (row) => {
		if (row) {
			loading.value = true;
			// 使用requestAnimationFrame优化渲染时机
			requestAnimationFrame(async () => {
				const res = await api.get(row.ID);
				newsData.value = (res as any).Entity || row;

				// 处理附件数据，确保每个附件都有正确的文件访问路径
				if ((res as any).SelectedArticleAttachmentsIds && Array.isArray((res as any).SelectedArticleAttachmentsIds)) {
					try {
						// 将附件信息保存到newsData中
						const attachmentsData = [];
						for (const attachment of (res as any).SelectedArticleAttachmentsIds) {
							if (attachment.IsVisible !== false) {
								// 只显示可见附件
								let fileName = '';
								// 尝试获取文件名
								try {
									fileName = (await fileApi().getName(attachment.FileId)) as string;
								} catch (e) {
									console.error('获取文件名失败:', e);
									fileName = '附件';
								}

								attachmentsData.push({
									name: fileName,
									url: `/api/_file/getfile/${attachment.FileId}`,
									type: fileName ? fileName.split('.').pop()?.toLowerCase() : '',
									FileId: attachment.FileId,
									ArticleId: attachment.ArticleId,
									ID: attachment.ID,
									IsVisible: attachment.IsVisible,
									Order: attachment.Order,
									size: 0, // 文件大小信息，如果API没有提供，默认为0
								});
							}
						}
						newsData.value.Attachments = attachmentsData;
					} catch (error) {
						console.error('处理附件数据失败:', error);
						ElMessage.error('附件信息加载失败');
					}
				}
				loading.value = false;

				// 等待DOM更新后处理DOM元素
				nextTick(() => {
					if (contentRef.value) {
						processContentDOM(contentRef.value);
						setupContentImagePreview();
					}
				});
			});
		} else {
			newsData.value = null;
		}
	},
	{ immediate: true }
);

// 监听对话框可见性
watch(
	() => props.visible,
	(isVisible) => {
		if (isVisible) {
			nextTick(() => {
				if (contentRef.value) {
					setupContentImagePreview();
				}
			});
		} else {
			// 关闭图片预览
			showImageViewer.value = false;
		}
	}
);

/**
 * 格式化日期
 */
function formatDate(dateStr?: string): string {
	if (!dateStr) return '';
	try {
		const date = new Date(dateStr);
		return new Intl.DateTimeFormat('zh-CN', {
			year: 'numeric',
			month: '2-digit',
			day: '2-digit',
			hour: '2-digit',
			minute: '2-digit',
		}).format(date);
	} catch {
		return dateStr;
	}
}

/**
 * 关闭对话框
 */
function onClose(): void {
	emit('update:visible', false);
}
</script>

<style scoped>
/* 全局图片预览容器，确保它处于最高层级 */
.global-image-viewer-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
}

.news-detail-dialog :deep(.el-dialog__body) {
	padding: 0;
	background: var(--home-bg-primary);
	border-radius: var(--home-radius-lg, 12px);
	max-height: 80vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch; /* 提升移动端滚动体验 */
	overscroll-behavior: contain; /* 防止滚动传播 */
}

.news-detail-loading,
.news-detail-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 40px 0;
	color: var(--home-text-secondary);
}

.news-detail-loading .loading-icon {
	font-size: 24px;
	margin-bottom: 8px;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.news-detail-container {
	padding: 0 0 32px;
	contain: content; /* 提升渲染性能 */
	transition: opacity 0.3s ease;
	animation: fade-in 0.4s ease-out;
}

@keyframes fade-in {
	from {
		opacity: 0.8;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.news-detail-dialog :deep(.el-dialog) {
	overflow: hidden;
	border-radius: var(--home-radius-lg, 12px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(var(--home-primary-rgb, 64, 158, 255), 0.1);
}

/* 头部区域样式优化 */
.news-detail-header {
	position: relative;
	padding: 36px 32px 28px;
	background: linear-gradient(to bottom, rgba(var(--home-primary-rgb, 64, 158, 255), 0.08), rgba(var(--home-primary-rgb, 64, 158, 255), 0.02));
	border-bottom: 1px solid rgba(var(--home-primary-rgb, 64, 158, 255), 0.1);
	text-align: center;
	margin-bottom: 28px;
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03);
}

.news-detail-header::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 3px;
	background-color: var(--home-primary);
	border-radius: 3px;
}

.category-tag {
	display: inline-block;
	position: relative;
	padding: 4px 16px;
	background-color: var(--home-primary);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	border-radius: 16px;
	margin-bottom: 20px;
	box-shadow: 0 3px 8px rgba(var(--home-primary-rgb, 64, 158, 255), 0.25);
	transform: translateY(0);
	transition: all 0.3s ease;
}

.category-tag::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
	border-radius: inherit;
}

.category-tag:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 12px rgba(var(--home-primary-rgb, 64, 158, 255), 0.4);
}

.news-detail-title {
	font-size: 30px;
	font-weight: 700;
	color: var(--home-text-primary);
	margin: 0 0 24px;
	padding: 0;
	letter-spacing: 0.5px;
	line-height: 1.4;
	position: relative;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.news-detail-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
	color: var(--home-text-secondary);
	font-size: 14px;
}

.meta-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	border-radius: 20px;
	background: rgba(var(--home-primary-rgb, 64, 158, 255), 0.05);
	transition: all 0.2s ease;
}

.meta-item:hover {
	background: rgba(var(--home-primary-rgb, 64, 158, 255), 0.1);
}

.meta-item .el-icon {
	font-size: 16px;
	color: var(--home-primary);
}

.news-detail-fields {
	margin: 0 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 16px; /* 调整间距 */
}

.news-detail-field {
	display: flex;
	align-items: flex-start;
	gap: 16px; /* 调整图标和内容之间的间距 */
	padding: 20px; /* 调整内边距 */
	border-radius: var(--home-radius-md, 12px);
	background: var(--home-bg-light);
	box-shadow: 0 2px 12px var(--home-shadow-light, rgba(45, 91, 227, 0.06));
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.news-detail-field::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--home-primary);
}

.news-detail-field:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px var(--home-shadow-light, rgba(45, 91, 227, 0.1));
}

.news-detail-field .field-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: rgba(var(--home-primary-rgb, 64, 158, 255), 0.1);
	color: var(--home-primary);
	font-size: 20px;
	flex-shrink: 0;
	transition: all 0.3s ease;
}

.news-detail-field:hover .field-icon {
	transform: scale(1.1);
	background-color: rgba(var(--home-primary-rgb, 64, 158, 255), 0.15);
}

.subtitle-icon {
	color: #36a3f7;
	background-color: rgba(54, 163, 247, 0.1);
}

.summary-icon {
	color: #34c759;
	background-color: rgba(52, 199, 89, 0.1);
}

.news-detail-field .field-content {
	flex: 1;
	padding-top: 2px;
}

.news-detail-field .field-label {
	font-size: 15px;
	font-weight: 600;
	color: var(--home-primary);
	margin-bottom: 8px;
	position: relative;
	display: inline-block;
	padding-bottom: 6px;
}

.news-detail-field .field-label::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 24px;
	height: 2px;
	background-color: var(--home-primary);
	border-radius: 1px;
}

.news-detail-field .field-text {
	font-size: 15px;
	color: var(--home-text-primary);
	line-height: 1.7;
	word-break: break-word;
	letter-spacing: 0.2px;
}

/* 封面图片样式 */
.news-detail-cover {
	margin: 0 32px 28px;
	border-radius: var(--home-radius-md, 12px);
	overflow: hidden;
	min-height: 200px;
	max-height: none;
	display: flex;
	justify-content: center;
	background: #f8f8fa;
	box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08);
	position: relative;
}

.news-detail-cover::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
	pointer-events: none;
	border-radius: inherit;
}

.news-detail-cover :deep(.el-image) {
	width: 100%;
	height: auto;
	max-height: 550px;
	object-fit: contain;
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
	cursor: pointer;
}

.news-detail-cover :deep(.el-image:hover) {
	transform: scale(1.03);
}

/* 内容区域样式增强 */
.news-detail-content {
	background: var(--home-bg-light);
	border-radius: var(--home-radius-md, 12px);
	margin: 0 32px 28px;
	padding: 28px 24px;
	font-size: 16px;
	color: var(--home-text-primary);
	line-height: 1.8;
	box-shadow: 0 2px 14px var(--home-shadow-light, rgba(45, 91, 227, 0.06));
	word-break: break-word;
	overflow: auto;
	position: relative;
}

.news-detail-content::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--home-primary) 0%, var(--home-primary-light, #a0cfff) 100%);
	border-radius: var(--home-radius-md, 12px) var(--home-radius-md, 12px) 0 0;
	opacity: 0.8;
}

/* Markdown样式增强 - 使用:deep选择器 */
.news-detail-content :deep(h1),
.news-detail-content :deep(h2),
.news-detail-content :deep(h3),
.news-detail-content :deep(h4),
.news-detail-content :deep(h5),
.news-detail-content :deep(h6) {
	margin-top: 1.5em;
	margin-bottom: 0.8em;
	color: var(--home-text-primary);
	font-weight: 600;
	line-height: 1.4;
}

.news-detail-content :deep(h1) {
	font-size: 1.8em;
	border-bottom: 1px solid #eaecef;
	padding-bottom: 0.3em;
}

.news-detail-content :deep(h2) {
	font-size: 1.5em;
	border-bottom: 1px solid #eaecef;
	padding-bottom: 0.3em;
}

.news-detail-content :deep(h3) {
	font-size: 1.3em;
}

.news-detail-content :deep(h4) {
	font-size: 1.2em;
}

.news-detail-content :deep(h5) {
	font-size: 1.1em;
}

.news-detail-content :deep(h6) {
	font-size: 1em;
}

.news-detail-content :deep(p) {
	margin: 16px 0;
	line-height: 1.8;
	letter-spacing: 0.3px;
}

/* 确保内容文本有良好的字间距 */
.news-detail-content {
	letter-spacing: 0.3px;
}

/* 列表样式 */
.news-detail-content :deep(ul),
.news-detail-content :deep(ol) {
	padding-left: 2em;
	margin: 16px 0;
}

.news-detail-content :deep(li) {
	margin: 8px 0;
}

.news-detail-content :deep(ul) {
	list-style-type: disc;
}

.news-detail-content :deep(ol) {
	list-style-type: decimal;
}

/* 引用块样式 */
.news-detail-content :deep(blockquote) {
	margin: 16px 0;
	padding: 0 1em;
	color: #6a737d;
	border-left: 0.25em solid #dfe2e5;
}

/* 为内容中的图片添加样式 */
.news-detail-content :deep(img) {
	max-width: 100%;
	height: auto;
	margin: 12px 0;
	border-radius: 4px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	cursor: pointer; /* 添加指针样式，表明可点击 */
	transition: all 0.2s ease;
}

.news-detail-content :deep(img:hover) {
	transform: scale(1.01);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 代码块样式 */
.news-detail-content :deep(pre) {
	position: relative;
	background: #f6f8fa;
	border-radius: 6px;
	padding: 16px;
	margin: 16px 0;
	overflow: auto;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 14px;
	line-height: 1.5;
}

.news-detail-content :deep(.hljs) {
	background: transparent;
}

.news-detail-content :deep(.code-line) {
	display: flex;
}

.news-detail-content :deep(.line-number) {
	color: #999;
	margin-right: 16px;
	text-align: right;
	min-width: 40px;
	user-select: none;
}

.news-detail-content :deep(.copy-button) {
	position: absolute;
	top: 8px;
	right: 8px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 4px 8px;
	font-size: 12px;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.3s;
}

.news-detail-content :deep(pre:hover .copy-button) {
	opacity: 1;
}

/* 行内代码样式 */
.news-detail-content :deep(:not(pre) > code) {
	background: rgba(var(--home-primary-rgb, 64, 158, 255), 0.1);
	color: var(--home-primary);
	padding: 0.2em 0.4em;
	margin: 0 0.2em;
	border-radius: 3px;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 0.9em;
}

/* 表格样式 */
.news-detail-content :deep(.md-table) {
	border-collapse: collapse;
	width: 100%;
	margin: 16px 0;
	overflow: auto;
	display: block;
}

.news-detail-content :deep(.md-table th),
.news-detail-content :deep(.md-table td) {
	border: 1px solid #dfe2e5;
	padding: 8px 16px;
	text-align: left;
}

.news-detail-content :deep(.md-table th) {
	background: #f6f8fa;
	font-weight: 600;
}

.news-detail-content :deep(.md-table tr:nth-child(2n)) {
	background: #f8f8f8;
}

/* 分割线样式 */
.news-detail-content :deep(hr) {
	height: 0.25em;
	padding: 0;
	margin: 24px 0;
	background-color: #e1e4e8;
	border: 0;
}

/* 链接样式 */
.news-detail-content :deep(a) {
	color: var(--home-primary);
	text-decoration: none;
	transition: color 0.3s;
}

.news-detail-content :deep(a:hover) {
	text-decoration: underline;
}

/* 附件列表样式 */
.news-detail-attachments {
	margin: 0 32px 24px;
}

.attachments-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--home-text-primary);
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	position: relative;
	padding-left: 16px;
}

.attachments-title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 18px;
	background: var(--home-primary);
	border-radius: 2px;
}

.attachments-title .el-icon {
	margin-right: 8px;
	font-size: 20px;
	color: var(--home-primary);
}

.attachments-list {
	background: var(--home-bg-light);
	border-radius: var(--home-radius-md, 12px);
	padding: 6px 0;
	box-shadow: 0 2px 12px var(--home-shadow-light, rgba(45, 91, 227, 0.06));
	overflow: hidden;
}

.attachment-item {
	padding: 14px 18px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	cursor: pointer;
	transition: all 0.25s ease;

	&:last-child {
		border-bottom: none;
	}

	&:hover {
		background: rgba(var(--home-primary-rgb, 64, 158, 255), 0.05);
		padding-left: 24px;
	}

	.el-icon {
		font-size: 22px;
		margin-right: 12px;
	}

	&.is-loading {
		background: rgba(var(--home-primary-rgb, 64, 158, 255), 0.08);
		cursor: wait;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			height: 2px;
			background: var(--home-primary);
			animation: loading-bar 2s infinite ease-in-out;
			width: 30%;
		}

		.attachment-download {
			animation: rotating 1.2s linear infinite;
		}
	}
}

@keyframes loading-bar {
	0% {
		width: 0;
		left: 0;
	}
	50% {
		width: 70%;
		left: 15%;
	}
	100% {
		width: 0;
		left: 100%;
	}
}

@keyframes rotating {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.file-icon.doc {
	color: #4285f4;
}

.file-icon.image {
	color: #34a853;
}

.file-icon.video {
	color: #ea4335;
}

.file-icon.other {
	color: #fbbc05;
}

.attachment-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--home-text-primary);
	font-size: 15px;
}

.attachment-download {
	margin-left: 12px;
	opacity: 0.7;
	transition: opacity 0.2s;
}

.attachment-download:hover {
	opacity: 1;
}

/* 加载状态美化 */
.image-loading-placeholder,
.image-error-placeholder {
	width: 100%;
	height: 100%;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: var(--el-fill-color-light);
	background: linear-gradient(to bottom right, rgba(var(--home-primary-rgb, 64, 158, 255), 0.02), rgba(var(--home-primary-rgb, 64, 158, 255), 0.06));
}

.image-loading-placeholder .loading-icon {
	font-size: 36px;
	margin-bottom: 16px;
	animation: rotating 2s cubic-bezier(0.26, 0.54, 0.32, 1) infinite;
	color: var(--home-primary);
}

.image-loading-placeholder span,
.image-error-placeholder span {
	font-size: 15px;
	opacity: 0.8;
}

.image-error-placeholder {
	color: var(--el-text-color-secondary);
}

@keyframes rotating {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
	.news-detail-dialog :deep(.el-dialog) {
		width: 95% !important;
		margin: 5vh auto !important;
		max-height: 90vh;
		border-radius: var(--home-radius-md, 8px);
	}

	.news-detail-header {
		padding: 28px 16px 20px;
	}

	.category-tag {
		padding: 3px 12px;
		font-size: 11px;
		margin-bottom: 16px;
	}

	.news-detail-title {
		font-size: 22px;
		margin-bottom: 16px;
		letter-spacing: 0.2px;
	}

	.news-detail-meta {
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}

	.meta-item {
		padding: 4px 10px;
		font-size: 12px;
	}

	.news-detail-content {
		font-size: 15px;
		padding: 20px 16px;
		line-height: 1.6;
	}

	.news-detail-field,
	.news-detail-content,
	.news-detail-attachments,
	.news-detail-fields,
	.news-detail-cover {
		margin: 0 16px 20px;
	}

	.news-detail-fields {
		gap: 14px;
	}

	.news-detail-field {
		padding: 16px;
		gap: 12px;
	}

	.news-detail-field .field-icon {
		width: 36px;
		height: 36px;
		font-size: 18px;
	}

	.news-detail-field .field-label {
		font-size: 14px;
		margin-bottom: 6px;
		padding-bottom: 4px;
	}

	.news-detail-field .field-text {
		font-size: 14px;
		line-height: 1.6;
	}

	.attachments-title {
		font-size: 16px;
		margin-bottom: 12px;
	}

	.attachment-item {
		padding: 12px 16px;
	}

	.attachment-item:hover {
		padding-left: 20px;
	}

	.attachment-name {
		font-size: 14px;
	}

	.news-detail-content :deep(ul),
	.news-detail-content :deep(ol) {
		padding-left: 1.5em;
	}

	/* 移动端表格滚动 */
	.news-detail-content :deep(.md-table) {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* 小屏幕手机 */
@media screen and (max-width: 480px) {
	.news-detail-dialog :deep(.el-dialog) {
		width: 100% !important;
		margin: 0 !important;
		height: 100vh;
		max-height: 100vh;
		border-radius: 0;
		display: flex;
		flex-direction: column;
	}

	.news-detail-dialog :deep(.el-dialog__body) {
		flex: 1;
		overflow-y: auto;
	}

	.news-detail-header {
		padding: 20px 12px 16px;
	}

	.news-detail-title {
		font-size: 20px;
	}

	.news-detail-fields {
		gap: 12px;
	}

	.news-detail-field {
		padding: 14px;
		gap: 10px;
	}

	.news-detail-field .field-icon {
		width: 32px;
		height: 32px;
		font-size: 16px;
	}

	.news-detail-cover {
		margin-bottom: 16px;
	}

	.news-detail-content :deep(h1) {
		font-size: 1.6em;
	}

	.news-detail-content :deep(h2) {
		font-size: 1.4em;
	}

	.meta-item .el-icon {
		font-size: 14px;
	}
}

/* 暗黑模式增强 */
:root.dark .news-detail-dialog :deep(.el-dialog__body) {
	background: var(--home-bg-primary-dark, #1a1e23);
}

:root.dark .news-detail-dialog :deep(.el-dialog__header) {
	background: var(--home-bg-primary-dark, #1a1e23);
}

:root.dark .news-detail-dialog :deep(.el-dialog) {
	background: var(--home-bg-primary-dark, #1a1e23);
	border-color: rgba(var(--home-primary-rgb, 64, 158, 255), 0.15);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

:root.dark .news-detail-loading,
:root.dark .news-detail-empty {
	color: var(--home-text-secondary-dark, #aaa);
}

:root.dark .news-detail-header {
	background: linear-gradient(to bottom, rgba(var(--home-primary-rgb, 64, 158, 255), 0.12), rgba(var(--home-primary-rgb, 64, 158, 255), 0.04));
	border-bottom: 1px solid rgba(var(--home-primary-rgb, 64, 158, 255), 0.15);
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}

:root.dark .news-detail-field,
:root.dark .news-detail-content,
:root.dark .attachments-list {
	background: var(--home-bg-dark, #23272e);
	color: var(--home-text-primary-dark, #e5eaf3);
	box-shadow: 0 2px 8px var(--home-shadow-dark, rgba(0, 0, 0, 0.25));
}

:root.dark .category-tag {
	box-shadow: 0 3px 8px rgba(var(--home-primary-rgb, 64, 158, 255), 0.3);
}

:root.dark .category-tag:hover {
	box-shadow: 0 5px 12px rgba(var(--home-primary-rgb, 64, 158, 255), 0.5);
}

:root.dark .news-detail-title {
	color: var(--home-text-primary-dark, #e5eaf3);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

:root.dark .meta-item {
	background: rgba(var(--home-primary-rgb, 64, 158, 255), 0.1);
}

:root.dark .meta-item:hover {
	background: rgba(var(--home-primary-rgb, 64, 158, 255), 0.15);
}

:root.dark .image-loading-placeholder,
:root.dark .image-error-placeholder {
	background: linear-gradient(to bottom right, rgba(var(--home-primary-rgb, 64, 158, 255), 0.03), rgba(var(--home-primary-rgb, 64, 158, 255), 0.08));
}

:root.dark .news-detail-content::before {
	opacity: 0.6;
}

:root.dark .news-detail-content :deep(h1),
:root.dark .news-detail-content :deep(h2) {
	border-bottom-color: #444;
}

:root.dark .news-detail-content :deep(pre) {
	background: #282c34;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

:root.dark .news-detail-content :deep(.copy-button) {
	background: #333;
	border-color: #555;
	color: #eee;
}

:root.dark .news-detail-content :deep(.md-table th) {
	background: #282c34;
}

:root.dark .news-detail-content :deep(.md-table tr:nth-child(2n)) {
	background: #2c313c;
}

:root.dark .news-detail-content :deep(.md-table td),
:root.dark .news-detail-content :deep(.md-table th) {
	border-color: #444;
}

:root.dark .news-detail-content :deep(blockquote) {
	color: #aaa;
	border-color: #555;
	background-color: rgba(255, 255, 255, 0.03);
}

:root.dark .news-detail-content :deep(:not(pre) > code) {
	background: rgba(78, 140, 255, 0.2);
	color: #a6c8ff;
}

:root.dark .news-detail-content :deep(hr) {
	background-color: #444;
}

:root.dark .news-detail-field strong {
	color: var(--home-primary-dark, #4e8cff);
}

:root.dark .news-detail-meta {
	color: var(--home-text-secondary-dark, #aaa);
}

:root.dark .news-detail-cover {
	background: #1e2227;
	box-shadow: 0 3px 16px rgba(0, 0, 0, 0.15);
}

:root.dark .attachments-title {
	color: var(--home-text-primary-dark, #e5eaf3);
}

:root.dark .attachment-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

:root.dark .attachment-item:hover {
	background: rgba(78, 140, 255, 0.12);
}

:root.dark .attachment-name {
	color: var(--home-text-primary-dark, #e5eaf3);
}

:root.dark .news-detail-container {
	background: var(--home-bg-primary-dark, #1a1e23);
}

:root.dark .news-detail-content :deep(p) {
	color: var(--home-text-primary-dark, #e5eaf3);
}

:root.dark .news-detail-content :deep(li) {
	color: var(--home-text-primary-dark, #e5eaf3);
}

:root.dark .news-detail-content :deep(img) {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.05);
}

:root.dark .news-detail-content :deep(a) {
	color: var(--home-primary-dark, #4e8cff);
}

/* 暗黑模式下的副标题和摘要样式 */
:root.dark .news-detail-field {
	background: var(--home-bg-dark, #23272e);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

:root.dark .news-detail-field .field-icon {
	background-color: rgba(var(--home-primary-rgb, 64, 158, 255), 0.15);
}

:root.dark .news-detail-field:hover .field-icon {
	background-color: rgba(var(--home-primary-rgb, 64, 158, 255), 0.2);
}

:root.dark .subtitle-icon {
	background-color: rgba(54, 163, 247, 0.15);
}

:root.dark .summary-icon {
	background-color: rgba(52, 199, 89, 0.15);
}

:root.dark .news-detail-field .field-label {
	color: var(--home-primary-dark, #4e8cff);
}

:root.dark .news-detail-field .field-text {
	color: var(--home-text-primary-dark, #e5eaf3);
}
</style>
